<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,uesr-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/teindex.css">
    <link rel="stylesheet" href="../css/inde-c3.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/qiandao_style.css">
</head>

<body>
<div class="objConter">
    <div class="leftFixlis">
        <div class="fixTophead"><img src="../images/detail-data-tu.gif" alt=""></div>
        <div class="fixCont">
            <ul>
                <a href="">
                    <li class="mouseclick"><i class="fa fa-cloud-download"></i> 云视频 <i class="fa fa-chevron-right"></i>
                    </li>
                </a>
                <a href="">
                    <li class="mouseclick"><i class="fa fa-vcard-o"></i> 学生信息 <i class="fa fa-chevron-right"
                                                                                 style="display:none;"></i>
                    </li>
                </a>


                <a href="">
                    <li class="mouseclick"><i class="fa fa-clipboard"></i> 审查批阅 <i class="fa fa-chevron-right"
                                                                                   style="display:none;"></i></li>
                </a>


            </ul>

        </div>
    </div>
    <div class="conterTop">
        <div class="topCont clearBox">
            <div class="topLeft">
                <ul class="topLeft-font">
                    <a href="../index.jsp">
                        <li class="mouseclick"><i class="fa fa-home"></i>主页</li>
                    </a>
                    <a href="">
                        <li class="mouseclick cta">题库</li>
                    </a>
                    <a href="">
                        <li class="mouseclick cta">班级</li>
                    </a>
                    <a href="">
                        <li class="mouseclick"><i class="fa fa-th"></i>更多功能</li>
                    </a>
                    <li class="mouseclick clearBox" id="top-seek">
                        <form action="">
                            <input type="text" placeholder="视频名称">
                            <input type="submit" value="">
                        </form>

                    </li>
                </ul>
            </div>
            <div class="topRight">
                <ul class="topRight-font clearBox">
                    <a href="">
                        <li class="rightlis selectFar mouseclick"><img src="../images/detail-data-tu.gif" alt="">
                            <ul class="selectCont">
                                <a href="detail.jsp">
                                    <li class="mouseclick cta">资料</li>
                                </a>
                                <a href="">
                                    <li class="mouseclick cta">可更改</li>
                                </a>
                                <a href="">
                                    <li class="mouseclick cta">可更改</li>
                                </a>
                            </ul>
                        </li>
                    </a>
                    <a href="">
                        <li class="rightlis mouseclick"><i class="fa fa-bell"></i> 消息

                        </li>
                    </a>
                </ul>
            </div>
        </div>
    </div>
    <div class="conterQuestion">
        <div class="tebutton">
            <button class="add">添加视频</button>
            <button class="delall">批量删除</button>
            <div class="sel">
                <input type="text" name="selvideo" id="selvideo" placeholder="搜索视频">
                <button><i class="fa fa-search"></i></button>
            </div>
        </div>
        <table class="vtab">
            <thead>
            <tr>
                <td><input type="checkbox" class="checkall"></td>
                <td>序号</td>
                <td>视频名称</td>
                <td>视频简介</td>
                <td>上传用户</td>
                <td>进度条</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><input type="checkbox" class="checkitem"></td>
                <td>1</td>
                <td><a href=""> sql</a></td>
                <td>sql语句创建数据库</td>
                <td>于景尧</td>
                <td>
                    <div id="proBar" class="proBar">
                        <div id="probox1" class="probox1"></div>
                        <div id="probox2" class="probox2">0%</div>
                    </div>
                </td>
                <td>
                    <button class="del">删除</button>
                    <button class="edit">修改</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" class="checkitem"></td>
                <td>1</td>
                <td><a href=""> sql</a></td>
                <td>sql语句创建数据库</td>
                <td>于景尧</td>
                <td>
                    <div id="proBar" class="proBar">
                        <div id="probox1" class="probox1"></div>
                        <div id="probox2" class="probox2">0%</div>
                    </div>
                </td>
                <td>
                    <button class="del">删除</button>
                    <button class="edit">修改</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" class="checkitem"></td>
                <td>1</td>
                <td><a href=""> sql</a></td>
                <td>sql语句创建数据库</td>
                <td>于景尧</td>
                <td>
                    <div id="proBar" class="proBar">
                        <div id="probox1" class="probox1"></div>
                        <div id="probox2" class="probox2">0%</div>
                    </div>
                </td>
                <td>
                    <button class="del">删除</button>
                    <button class="edit">修改</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox" class="checkitem"></td>
                <td>1</td>
                <td><a href=""> sql</a></td>
                <td>sql语句创建数据库</td>
                <td>于景尧</td>
                <td>
                    <div id="proBar" class="proBar">
                        <div id="probox1" class="probox1"></div>
                        <div id="probox2" class="probox2">0%</div>
                    </div>
                </td>
                <td>
                    <button class="del">删除</button>
                    <button class="edit">修改</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div class="text-from1" id="scDiv">
            <form action="" class="add-t">
                <fieldset>
                    <legend>添加信息</legend>
                    <form action="">
                        <input class="f1" type="text" name="tname" id="tnameAddVideo" placeholder="请输入视频名称">
                        <input class="f1" type="text" name="ttime" id="videoInfo" placeholder="请输入视频简介">
                        <div>
                            <input type="button" class="tefile" value="上传文件">
                            <input type="file" id="myfile" onchange="changeUpLoadByName(this)">
                        </div>
                        <input class="f1" type="text" name="tname" id="tname" placeholder="请输入上传用户" value="于景尧"
                               disabled>
                        <button class="Aquiet" id="add-no">取消</button>
                        <input type="button" class="Asure" id="add-yes" value="上传">
                    </form>
                </fieldset>
            </form>
        </div>


        <div class="text-from2">
            <form action="" class="edit-t">
                <fieldset>
                    <legend>修改信息</legend>
                    <form action="">
                        <input class="f1" type="text" name="tname" id="tname" placeholder="请输入视频名称">
                        <input class="f1" type="text" name="ttime" id="ttime" placeholder="请输入视频简介日期">
                        <div>
                            <input type="button" class="tefile2" value="上传文件">
                            <input type="file" id="fileVideo">
                        </div>
                        <input class="f1" type="text" name="tname" id="tname" placeholder="请输入视频名称" value="于景尧"
                               disabled>
                        <button class="Bquiet" id="edit-no">取消</button>
                        <input type="button" class="Bsure" id="edit-yes" value="确定">
                    </form>
                </fieldset>
            </form>
        </div>
        <div class="text-from3">
            <div class="icon-close-3"><i class="fa fa-minus-square fa-3x"></i></div>
            <div class="text-from3-box">
                <input type="text" name="yanzhengma" class="yanzhengma" id="yanzhengma" placeholder="请输入用户密码">
                <button class="yanzhengma-yes">确定</button>
                <!-- <div class="yanzhengimg" id="yanzhengimg"><p>886123</p></div> -->
            </div>
        </div>
        <div id="jdt" style="width: 40%">

        </div>
    </div>
</div>

</body>
<script src="../js/jquery-3.3.1.js"></script>
<script src="../js/csanimate.js"></script>
<script src="../js/qiandao_js.js"></script>
<script src="../js/teindex.js"></script>
<script>
    $('.checkall').on('click', function () {
        let flag = $(this).prop('checked');

        $('tbody .checkitem').prop('checked', flag);
    })
    //点击每一项 如果每一项都选中 全选按钮要选中
    $('tbody').on('click', '.checkitem', function () {
        let checkNum = $('tbody .checkitem').length;
        let checkedNum = $('tbody .checkitem:checked').length;
        console.log(checkNum, checkedNum);
        checkNum == checkedNum ? $('.checkall').prop('checked', true) : $('.checkall').prop('checked', false);
    })
</script>

<script>
    $('.Bsure').on('click', function () {
        //这里是进度条开启
        $(".jdtClass").stop().slideDown('slow');
    })
    $('.add').on('click', function () {
        $('.text-from1').stop().slideDown('slow');
    });
    $('.add-t .Asure').on('click', function () {
        // $("#jdt").html("<fieldset id=\"JdtId\">\n" +
        //     "          <iframe src=\"../pages/jdt.html\"></iframe>\n" +
        //     "        </fieldset>");
        $("#scDiv").hide();
    });
    $('.vtab').on('click', '.edit', function () {
        $('.text-from2').stop().slideDown('slow');
    });
    $('.edit-t .Bsure').on('click', function () {
        alert('修改成功');
    });
    $('tbody').on('click', '.del', function () {
        $('.text-from3').stop().slideDown('slow');
    });
    $('.icon-close-3 i').on('click', function () {
        $('.text-from3').stop().slideUp();
    });
</script>
<script>
    function changeUpLoadByName(ele) {
        var fN = '';
        //判断并获取文件名
        if(fN = ele.value.match(/[^\\\/]+\.[a-zA-Z0-9]+$/)){
            //如果获取到文件名，则将文件名在后面的span标签中显示出来。
            //这里你可以自行修改要显示的样式等。
           $("#tnameAddVideo").val(fN)
        }else{
            $("#tnameAddVideo").val("获取文件名称异常")
        }
    }
</script>
<script>
    window.onload = function () {
        function my$(ele) {
            return document.getElementById(ele);
        }

        var oBtn = my$('add-yes');
        var oMyFile = my$('myfile');
        var oDiv1 = my$('proBar');
        var oDiv2 = my$('probox1');
        var oDiv3 = my$('probox2');
        oBtn.onclick = function () {
            //利用ajax发送必须要有一个ajax对象
            var xhr = new XMLHttpRequest();

            //监听上传事件
            xhr.onload = function () {
                //alert(1);
                alert(this.responseText); //后端返回的数据

                var d = JSON.parse(this.responseText);
                alert(d.msg + ' : ' + d.url);
                //显示上传成功 并且显示文件路径
                alert('OK 上传完成');
            }

            //如果要实现上传进度条，则要使用上传进度对象
            var oUpload = xhr.upload;
            // alert(oUpload); //上传进度的事件对象
            // 上传过程中是连续被触发的 监控上传进度
            oUpload.onprogress = function (ev) {
                //ev.total(要发送的总量)、ev.loaded(待发送的总量)
                console.log(ev.total + ' : ' + ev.loaded);

                var iScale = (ev.loaded / ev.total).toFixed(4);
                oDiv2.style.width = 300 * iScale + 'px'; //显示上传进度
                oDiv3.innerHTML = iScale * 100 + '%'; //显示上传百分百

            }

            xhr.open('post', '/fxservlet?method=fx&fileName='+$("#tnameAddVideo").val()+'&videoInfo='+$("#videoInfo").val(), true); //open打开的方式不能使用get,上传文件的地址,使用异步上传
            //在使用post发送的时候必须要带一些请求头信息
            xhr.setRequestHeader('X-Request-With', 'XMLHttpRequest');

            //send要发送数据
            //将要上传的数据转换成二进制数据
            //那么必须知道后端接收当前文件的名称是什么 然后后面带上当前文件的数据

            var oFormData = new FormData(); //通过FormData来构建提交数据
            oFormData.append('file', oMyFile.files[0]);

            xhr.send(oFormData);
        }
    }
</script>

<script type="text/javascript" color="0, 0, 0" pointColor="0, 0, 0" opacity='1' zIndex="-2" count="100"
        src="../background-special-effects/dist/canvas-nest.js"></script>
<script type="text/javascript" src="../background-special-effects/dist/canvas-nest.umd.js"></script>
<script type="text/javascript">
    var cn = new CanvasNest(document.getElementById('area-render'), {
        color: '0,0,0',
        count: 50,
    });

    // var scene = document.querySelector('body');
    // var parallax = new Parallax(scene, {
    //     calibrateX: false,
    //     calibrateY: true,
    //     invertX: false,
    //     invertY: true,
    //     limitX: false,
    //     limitY: 10,
    //     scalarX: 2,
    //     scalarY: 8,
    //     frictionX: 0.2,
    //     frictionY: 0.8
    // });
</script>

</html>